import React, { Component } from 'react'
import Breadcrumb from '../base/Breadcrumb'
import { Button, Table, MessageBox, Message } from 'element-react'
import DatePicker from '../base/DatePicker'
import Select from '../base/Select'
import Pagination from '../base/Pagination'
import {withRouter} from 'react-router-dom'
import styled from 'styled-components'
import {formatDate2} from '../../common/js/index'

class MemberList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      totalElements: 40,
      pageNo: 0,
      status: '',
      startTime: '',
      endTime: '',
      statusArr: [
        {
          label: '可用',
          value: 'enable'
        },
        {
          label: '不可用',
          value: 'disabled'
        }
      ],
      columns: [
        {
          label: "会员ID",
          prop: "id",
          align: "center"
        },
        {
          label: "会员名称",
          prop: "username",
          align: "center"
        },
        {
          label: "注册时间",
          prop: "createTime",
          align: "center"
        },
        {
          label: "状态",
          prop: "statusStr",
          align: "center"
        },
        {
          label: "操作",
          prop: "operate",
          align: "center",
          render: (item) => {
            return (
              <span>
                <Button type="info" size="small" onClick={this.goDetail.bind(this, item)}>查看</Button>
                <Button type="info" size="small" onClick={this.changeStatus.bind(this, item)}>状态变更</Button>
              </span>
            )
          }
        }
      ],
      data: []
    }
  }
  componentDidMount () {
    this.init()
  }
  init () {
    let data = {
      "pageNo": 0,
      "pageSize": 10,
      "endTime": "",
      "startTime": ""
    }
    this.getConsumerList(data)
  }
  getConsumerList (data) {
    this.$ajax.getConsumerList(data).then(res => {
      if (res.code === 200) {
        res.data.content.map(a => {
          a.createTime = formatDate2(a.createTime)
          if (Number(a.status) === 1) {
            a.statusStr = '可用'
          } else {
            a.statusStr = '不可用'
          }
          return a
        })
        this.setState({data: res.data.content, totalElements: res.data.totalElements})
      } else {
        Message.error(res.msg)
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  search () {
    if ((this.state.startTime && this.state.endTime === null) || (this.state.startTime === null && this.state.endTime)) {
      Message.error('开始时间和结束时间都需要填')
      return
    }
    let data
    if (this.state.status) {
      data = {
        pageNo: 0,
        pageSize: 10,
        endTime: this.state.endTime,
        startTime: this.state.startTime,
        status: this.state.status
      }
    } else {
      data = {
        pageNo: 0,
        pageSize: 10,
        endTime: this.state.endTime,
        startTime: this.state.startTime
      }
    }
    this.getConsumerList(data)
  }
  getTime (begin, end) {
    this.setState({endTime: end, startTime: begin})
  }
  selectWay (value) {
    this.setState({status: value})
  }
  changePage (value) {
    this.setState({pageNo: value - 1}, () => {
      let {pageNo, pageSize, endTime, startTime, status} = this.state
      let data = {pageNo, pageSize, endTime, startTime, status}
      this.getConsumerList(data)
    })
  }
  goDetail (item) {
    this.props.history.push({
      pathname: `/memberDetail/${item.id}`,
      state: { fromDashboard: true }
    })
  }
  changeStatus (item) {
    MessageBox.confirm('确认更改状态?', '提示', {
      type: 'warning'
    }).then(() => {
      this.editConsumerStatus(item)
    }).catch(() => {
      Message({
        type: 'info',
        message: '已取消更改'
      })
    })
  }
  editConsumerStatus (item) {
    let data
    if (Number(item.status) === 1) {
      data = {
        id: item.id,
        status: 'disabled'
      }
    } else {
      data = {
        id: item.id,
        status: 'enable'
      }
    }
    this.$ajax.editConsumerStatus(data).then(res => {
      if (res.code === 200) {
        Message({
          type: 'success',
          message: '修改成功'
        })
        this.init()
      } else {
        Message.error('修改失败')
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  growRule () {
    this.props.history.push({
      pathname: '/memberGrowList',
      state: { fromDashboard: true }
    })
  }
  integralRule () {
    this.props.history.push({
      pathname: '/memberIntegralList',
      state: { fromDashboard: true }
    })
  }
  render () {
    const TableClass = styled.div`
      margin-top: 40px;
    `
    return (
      <div className="memberList">
        <Breadcrumb data={['会员管理', '会员']}/>
        <div className="search">
          <div className="search-item">
            <div className="inputGroupList">
              <label className="inputLabelList">注册时间：</label>
              <DatePicker getTime={this.getTime.bind(this)}/>
            </div>
          </div>
          <div className="search-item">
            <div className="inputGroupList">
              <label className="inputLabelList">状态：</label>
              <Select options={this.state.statusArr} select={this.selectWay.bind(this)}/>
            </div>
            <button type="button" className="btn btn-search" onClick={this.search.bind(this)}>搜索</button>
          </div>
        </div>
        <div className="inline-marginR-20"><button type="button" className="btn btn-increase" onClick={this.growRule.bind(this)}>会员成长规则</button></div>
        {/*<button type="button" className="btn btn-increase" onClick={this.integralRule.bind(this)}>平台积分规则</button>*/}
        <TableClass>
          <Table
              style={{width: '100%'}}
              columns={this.state.columns}
              data={this.state.data}
              border={true}
          />
        </TableClass>
        <Pagination total={this.state.totalElements} changePage={this.changePage.bind(this)}/>
      </div>
    )
  }
}

export default withRouter(MemberList)
